<template>
    <div>
        <ModalComponent @open="handleOpen" modal-name="exam-room-modal" title="考场管理" :close-on-click-modal="false"
            size="1024px" type="drawer">
            <div style="padding-bottom: 16px;">
                <el-text class="mx-1" size="large">赛项：{{ info.name }}({{ info.playingTime
                }})</el-text>
            </div>
            <div class="head-btns">
                <el-space>
                    <el-button @click="handleOpenInfoModal({ data: { eventId: query_data.eventId }, type: 'add' })"
                        type="primary" size="large">新增考场</el-button>
                    <!-- <el-button size="large" @click="handleImportTable">导入考场</el-button>
                    <el-link @click="handleDownloadTpl">下载导入模版</el-link> -->
                </el-space>

                <el-space>
                    <el-input v-model="query_data.siteName" size="large" placeholder="请输入考场名称"></el-input>
                    <el-button size="large" @click="handleLoad(true)">搜索</el-button>
                </el-space>
                <!-- 搜索 -->
                <!-- <el-input></el-input> -->
            </div>
            <div>
                <el-table v-loading="loading" empty-text="暂无数据..." :data="tableData" border style="width: 100%">
                    <el-table-column label="序号" prop="siteId" width="100" />
                    <!-- <el-table-column label="赛项名" prop="stem" /> -->
                    <el-table-column label="考场名" prop="siteName">
                    </el-table-column>
                    <el-table-column label="考试时间" prop="startTime" />
                    <el-table-column label="考试时长" prop="examDuration" />
                    <el-table-column label="操作" prop="Address" width="100">
                        <template #default="scope">
                            <el-dropdown trigger="click" @command="(value) => handleOperate(value, scope.row)">
                                <span class="el_dropdown_link">
                                    操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item :icon="Menu" command="manage"> 管理该考场批卷老师 </el-dropdown-item>
                                        <el-dropdown-item :icon="Edit" command="edit"> 编辑考场 </el-dropdown-item>
                                        <el-dropdown-item :icon="Delete" command="del"> 删除考场 </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination background layout="prev, pager, next, total" :total="total"
                        @current-change="handlePage" />
                </div>
            </div>
            <ExamRoomInfoModal @update="handleCloseModalAndUpdateData" />
            <GradingTeacherInfoModal />
            <el-upload ref="upload" action="#" :auto-upload="false" :show-file-list="false" :on-change="handleFileChange">
            </el-upload>
        </ModalComponent>
    </div>
</template>
<script setup >
import { onMounted, ref } from 'vue'
import ModalComponent from "@/components/modal/index.vue"
import { usePage } from "@/hooks/usePage"
import { DeleteSite, GetSiteList } from '@/api/gradingTeacher';
import { ElMessage, ElMessageBox } from 'element-plus';
import ExamRoomInfoModal from "./exam-room-info.vue"
import GradingTeacherInfoModal from "./grading-teacher-modal.vue"
import { AddSite } from "@/api/gradingTeacher"

import { open, close } from '@/utils/modal';
import { exportXlsx, readXlsx } from '@/utils/xlsx';
import { Menu, Edit, Delete } from '@element-plus/icons-vue';
// 表格数据
const {
    total: total,
    data: tableData,
    query_data,
    loading,
    handleLoad,
    handlePage
} = usePage({
    api_fn: GetSiteList,
    q_data: {
        eventId: '',
        siteName: ""
    }
})

const info = ref({});
const handleOpen = (item) => {
    info.value = item;
    query_data.value.eventId = item.eventId
    handleLoad(true);
}

const handleOperate = (command, row) => {
    if (command == 'manage') {
        open("grading-teacher-modal", row)
        return;
    }
    if (command == 'edit') {
        handleOpenInfoModal({
            data: row,
            type: "edit"
        });
        return;
    }
    if (command == 'del') {
        ElMessageBox.confirm('确定是否要删除该考场？', "提示", {
            "cancel-button-text": "取消",
            "confirm-button-text": "确定",
            type: "warning"
        }).then(async () => {
            let res = await DeleteSite({
                siteId: row.siteId,
            })
            if (!res.success) {
                ElMessage.error(res.message);
            } else {
                ElMessage.success(res.message);
                handleLoad(true)
            }
        })
    }
}
const handleOpenInfoModal = (data = null) => {
    open('exam-room-info', data)
}

const handleCloseModalAndUpdateData = () => {
    close('exam-room-info');
    handleLoad(true)
}

/**
 * 下载导入模版
 */
const handleDownloadTpl = () => {
    exportXlsx("导入模版", [
        {
            "考场名": "赛项名称1",
            "考试时间": "2023-11-28 09:00:00",
            "考试时长": "90",
        }
    ])
}
const upload = ref();
/**
 *  导入表格
 */
const handleImportTable = () => {
    upload.value.$refs.uploadRef.$refs.inputRef.click()
}
const handleFileChange = async (UploadFile) => {
    let data = await readXlsx(UploadFile.raw, '工作蒲1', (item) => {
        return {
            siteName: item['考场名'],
            startTime: item['考试时间'],
            examDuration: item['考试时长'],
        }
    })
    let res = await AddSite(data, {
        eventId: query_data.value.eventId,
    })
    if (!res.success) {
        ElMessage.error(res.message);
    } else {
        ElMessage.success(res.message);
        handleLoad(true)
    }
}
onMounted(() => {
    console.log('mounted!')
})
</script>
<style lang="scss" scoped>
.el-drawer__header {
    margin: 0;
}

.head-btns {
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
}
</style>